<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src = "../js/echarts.min.js"></script>
    <script type="text/javascript" src = "../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id = "main" style = "width: 900px;height:500px">


</div>
<script type="text/javascript">
    $(function(){

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        $.getJSON("https://bdapi.gxist.cn/api/sex-depressed",function(values) {
            var xdata=[];
            for(var i=0;i<values["data"].length;i++){
                //重写JSON表单格式
                var arr = {"name":values["data"][i]["sex"],"value":values["data"][i]["depressedSex"]};
                xdata.push(arr);
            }
            console.log(xdata);
        var option;

        option = {
            title: {
                text: '不同性别抑郁症患者分布',
                //subtext: 'Fake Data',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data:xdata,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    })
    })
</script>
</body>
</html>